<template>
  <el-form-item label="频道" prop="channel_id">
          <el-select @change="hSelectChange" v-model="channel_id" placeholder="请选择频道">
            <el-option 
            v-for="channel in channelList"
            :key="channel.id"
            :label="channel.name" 
            :value="channel.id"></el-option>
            
          </el-select>
        </el-form-item>
</template>

<script>
import axios from 'axios'
export default {
    name:'channel',
    props:[
        'value'
    ],

    data(){
        return{
            channel_id:null,
            channelList:[]
        }
    },
    created () {
        this.loadChannels()
    },
    watch:{
        value(newVal,oldVal) {
            this.channel_id = newVal
        }
    },
    methods:{
        async loadChannels(){
            const result = await axios({
                method:'get',
                url:'http://ttapi.research.itcast.cn/mp/v1_0/channels'
            })
            
            this.channelList=result.data.data.channels
            
        },
        hSelectChange(){
            this.$emit('input', this.channel_id)
            
        }
    }
}
</script>

<style>

</style>